@import "../../styles/default";

.okay-tab{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: size(12) 0;
  font-family: PingFang SC;
  font-size: pxToRem(16);
  position: relative;
  .indicator{
    display: inline-block;
    width: pxToRem(24);
    height: size(4);
    position: absolute;
    transition: left 0.5s;
    left: 0;
    bottom: 0;
  }
  &.vertical {
    flex-direction: column;
  }

  .okay-tab-item {
    text-align: center;
    flex: 1;
    &.active {
      &.success {
        color: $success;
        & ~ .indicator {
          background: $success;
        }
      }
      &.danger {
        color: $danger;
        & ~ .indicator {
          background: $danger;
        }
      }
      &.info {
        color: $info;
        & ~ .indicator {
          background: $info;
        }
      }
      &.primary{
        color: $primary;
        & ~ .indicator {
          background: $primary;
        }
      }
      &.warn {
        color: $warn;
        & ~ .indicator {
          background: $warn;
        }
      }
    }
  }
  &.scroll {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100%;
    .okay-tab-item {
      flex-shrink: 0;
      min-width: 25%;
    }
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
